<script src="../../api/user.js"></script>
<script src="../../../.eslintrc.js"></script>
<template>
  <div class="dashboard-container">
    <div class="dashboard-text">首页: {{ name }}</div>
    <!--  -->
    <h2>插槽</h2>
    <hr />
    <hr />
    时间线 图表
    <!-- -------------------------------------- -->
    <div class="box">
      <div class="son1">
        <h2>时间线</h2>
        <timeLine :items="items" />
      </div>
      <div class="son2">
        <h2>折线图</h2>
        <!-- 折线图 -->
        <Linechart />
      </div>
    </div>
    <div class="box2">
      <h2>饼图</h2>
      <div class="pieEchart">
        <pieEchart />
      </div>
      <div class="text">
        <h2>背景图片</h2>
        <img src="../../assets/dashboard/title.png" alt="" />
      </div>
      <div class="upload">
        <h2>上传</h2>
      </div>
      <h2>上传2</h2>
      <div class="contain">
        <el-upload
          class="upload-demo sendData"
          :action="UploadUrl()"
          accept=".xls"
          :on-preview="handlePreview"
          :on-change="fileChange"
          :before-remove="beforeRemove"
          :limit="1"
          :http-request="uploadFile"
          :auto-upload="true"
          :on-exceed="handleExceed"
          :file-list="fileList2"
        >
          <el-button size="small" type="primary" class="dataSendBtn">上传数据</el-button>
          <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
        </el-upload>
      </div>
    </div>
    <!-- 联结选择器 -->
    <h1>级联选择器</h1>
    <h1 v-if="btn">级联选择器</h1>
    <div></div>
  </div>
</template>

<script>
import Linechart from './components/Linechart.vue';
import pieEchart from './components/pieEchart.vue';
import timeLine from '@/views/dashboard/components/timeLine.vue';
import { mapGetters } from 'vuex';

export default {
  name: 'Dashboard',

  data() {
    return {
      btn: true,
      regionOption: [], //地域信息
      selectedOptions: [], //当前选中的地域信息
      regionParams: {
        label: 'name', //这里可以配置你们后端返回的属性
        value: 'id',
        children: 'childrenRegionVo',
        expandTrigger: 'hover',
        checkStrictly: true,
      }, //地域信息配置参数

      fileList2: [],
      fileList: [
        {
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
        },
      ],
      items: [
        {
          content: '提交审批',
          person: '李小明',
          time: '2020-03-20 12:30',
          color: 'green',
        },
        {
          content: '财务审批',
          person: '张文强',
          time: '2020-03-25 13:30',
          color: 'green',
        },
        {
          content: '待调度审核',
          person: '陈璐',
          time: '2020-03-21 18:30',
        },
        {
          content: '已审核',
          person: '成雪',
          time: '2020-03-27 13:30',
        },
      ],
    };
  },
  computed: {
    ...mapGetters(['name']),
  },
  components: {
    timeLine,
    Linechart,
    pieEchart,
  },
  methods: {
    UploadUrl() {
      // 因为action参数是必填项，我们使用二次确认进行文件上传时，
      //直接填上传文件的url会因为没有参数导致api报404，所以这里将action设置为一个返回为空的方法就行，避免抛错
      return '';
    },
    fileChange(file, fileList) {
      this.fileList.push(file.raw);
      console.log(this.fileList);
    },
    handleCurrentChange() {},
    handleSizeChange() {},
    sendData() {
      console.log('sadsad');
    },

    uploadFile(val) {
      if (this.fileList.length === 0) {
        this.$message.warning('请上传文件');
      } else {
        const form = new FormData();
        // file和flag分别为后端要求上传的参数名，类似于post、get等请求中的参数
        form.append('file', val.file);
        form.append('flag', true);
        this.fileList = [];
        this.$api
          .post('/import/upload', form)
          .then((res) => {
            console.log(res);
            if (res) {
              console.log(res);
              this.$message({
                message: '上传成功',
                type: 'success',
              });
            } else {
              console.log(res);
            }
          })
          .catch((res) => {
            console.log(res);
          });
      }
    },
    handlePreview(file) {
      console.log(file);
    },
    // 文件限制钩子函数
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件,请刷新页面后重试。`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // handleRemove(file, fileList) {
    //   console.log(file, fileList)
    // },
    // handlePreview(file) {
    //   console.log(file)
    // },
    // handleExceed(files, fileList) {
    //   this.$message.warning(
    //     `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
    //   )
    // },
    // beforeRemove(file, fileList) {
    //   return this.$confirm(`确定移除 ${file.name}？`)
    // },
    lineColor(color, index) {
      let i;
      this.items.forEach((item, j) => {
        if (item.color) {
          i = j;
        }
      });
      if (color && i !== index) {
        return color;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.dashboard {
  background: url(../../assets/dashboard/title.png) no-repeat top center;
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
  .echarts {
    width: 300px;
    height: 300px;
    background-color: pink;
  }
  //   时间线
  * {
    margin: 0;
    padding: 0;
  }
  .items {
    margin: 50px;
  }
  .item {
    font-size: 13px;
    color: #666;
    display: flex;
    align-content: center;
    position: relative;
    height: 86px;
  }
  .point {
    width: 12px;
    height: 12px;
    background: #e4e7ed;
    border-radius: 50%;
  }
  .line {
    position: absolute;
    left: 5px;
    top: 12px;
    width: 2px;
    height: 75px;
    background: #e4e7ed;
  }
  .item-right {
    margin-left: 14px;
    margin-top: -2px;
  }
}
.box {
  display: flex;
  .son1,
  .son2 {
    flex: 1;
  }
}
.text {
  font-weight: 400;
  background-color: pink;
  h2 {
    text-indent: 3em; //首行缩进3个字符
    // // 背景图片 不平铺 位置靠左 居中
    background: url(../../assets/dashboard/title.png) no-repeat left center;
  }
}
</style>
